<template>
  <view class="grid">
    <view class="selectContent">
      <view class="deviceSelect">
        <text style="font-size: 1.2em;">设备选择</text>
        <text style="font-size: 1.1em;color: #cacdd1;">selecton</text>

        <view class="uni-px-5 uni-pb-5">
          <uni-data-select v-model="multipleValue" multiple wrap :localdata="range" mode="underline"
            @change="selectdevice"></uni-data-select>
        </view>
      </view>
      <view class="competure">
        <view>
          <uni-data-select v-model="datatagmultipleValue" multiple wrap :localdata="datatagrange" mode="underline"
            @change="selecttag()"></uni-data-select>
        </view>
       
          <view style="padding:0 20px;font-size: 1.2em;">
            最佳数据
            <text style="padding: 10px 0px 0px 20px;font-size: 1.1em;color: #cacdd1;">Max</text>
          </view>
        <view style="padding:0 20px;font-size: 1.2em;margin-top: 50rpx;">
          最差数据
          <text style="padding: 10px 0px 0px 20px;font-size: 1.1em;color: #cacdd1;">Min</text>
        </view>

      </view>
    </view>

    <view class="echarts">
      <EchartsVue ref="DataEchartsRef" :headtitle="headtitle" :chartdate="Data"></EchartsVue>
    </view>
  </view>
</template>

<script>
import EchartsVue from '@/components/functions/Echarts.vue';
export default {
  components: {
    EchartsVue,
  },
  data() {
    return {
      headtitle: [],
      Data: [
        [],
        [],
        [],
        [],
        [],
        [],
        []
      ],
      no: null,
      History_data: [],
      History_data_compelete: [],
      History_data_compelete_tag: [],
      History_data_compelete_time: [],
      data_compelete_field: 'field1',
      multipleValue: [0, 1],
      range: [{
        "value": 0,
        "text": "设备1",
      }, {
        "value": 1,
        "text": "设备2",
      }, {
        "value": 2,
        "text": "设备3"
      }],
      datatagmultipleValue: [0],
      datatagrange: [{
        "value": 0,
        "text": "温度",
      }, {
        "value": 1,
        "text": "水位",
      }, {
        "value": 2,
        "text": "烟雾"
      }],
    }
  },

  created() {
    uni.hideTabBar({});
    this.ws = uni.connectSocket({
      url: 'ws://192.168.1.111:8080/DataCompare',
      success: () => {
        console.log('WebSocket连接成功');
      }
    });
    this.ws.onMessage((e) => {
      let obj = JSON.parse(e.data);
      console.log(obj)
      switch (obj.topic) {
        case 'headtitle':
          this.headtitle = obj.data;
          this.onchangeMultiple();
          this.onClickItem();
          this.senddata()

          break;

        case 't_data_compelete':
          this.History_data_compelete = obj.data;
          this.History_data_compelete_time = [];
          this.Data = [
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            []
          ];
          let num_device = this.multipleValue.length;
          for (let i = 0; i < obj.data.length; i++) {
            if (i % num_device == 0) {
              this.History_data_compelete_time.push(obj.data[i].c_time);
            }
            let offset = Math.max(obj.data[i].d_no - num_device + 1, 0);
            for (let j = 0; j < this.datatagmultipleValue.length; j++) {
              this.Data[obj.data[i].d_no + j * num_device - offset].push(obj.data[i][this.data_compelete_field.split(',')[j]])
            }
          }
          this.$nextTick(() => {
            this.$refs.DataEchartsRef.updatacompeletecharts(this
              .History_data_compelete_time, this.History_data_compelete_tag, this
              .Data)
          })
          break;
        default:
          break;
      }
    });
    this.ws.onClose(() => {
      console.log('WebSocket已关闭');
    });
  },
  methods: {
    selectdevice() {
      this.onClickItem()
      this.onchangeMultiple()
      this.senddata()
    },
    selecttag() {
      this.onchangeMultiple()
      this.senddata()
    },
    senddata() {
      this.ws.send({
        data: JSON.stringify({
          pageIndex: this.multipleValue.length * 5,
          type: "compelete",
          id: this.no,
          fields: this.data_compelete_field
        })
      });
    },
    onClickItem() {
      let d_no = '';
      for (let i = 0; i < this.multipleValue.length; i++) {
        d_no += 'd_no = ' + this.multipleValue[i] + ' '
        if (i != this.multipleValue.length - 1) {
          d_no += ' or '
        }
      }
      this.no = d_no
    },
    onchangeMultiple() {
      let head = [];
      let field = '';
      for (let i = 0; i < this.datatagmultipleValue.length; i++) {
        for (let j = 0; j < this.multipleValue.length; j++) {
          head.push({
            "f_name": this.range[this.multipleValue[j]].text + this.datatagrange[this.datatagmultipleValue[i]].text
          })
          this.History_data_compelete_tag = head;
        }
        field += 'field' + parseInt(this.datatagmultipleValue[i] + 1)
        if (i != this.datatagmultipleValue.length - 1) {
          field += ','
        }
      }
      this.data_compelete_field = field;
      console.log(field, head)
    }
  }
}
</script>

<style scoped>

.grid {
  padding: 20rpx;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
}
.selectContent{
  display: grid;
  grid-template-columns: repeat(2,1fr);
}
.deviceSelect{
    padding: 20rpx;
    background-color: white;
    border-radius: 10px;
    border: 2px solid;
    border-color: rgb(230, 231, 235);
}
.competure{
  padding: 20rpx;
  background-color: white;
  border-radius: 10px;
  border: 2px solid;
  border-color: rgb(230, 231, 235);
}

.uni-px-5 {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 40px;
}

.uni-pb-5 {
  padding-bottom: 10px;
}
.echarts {
  margin-top: 50rpx;
    background-color: white;
    width: 100%;
    height: 50vh;
    border-radius: 10px;
    border: 2px solid;
    border-color: rgb(230, 231, 235);
}
/* 移动端适配 - 针对小屏幕优化 */
@media screen and (max-width:361px) {
.selectContent {
    grid-template-columns: repeat(1, 1fr);
  }

  .echarts {
    height: 500rpx;
    width: 1900rpx;
    /* 用 scale 整体缩放后，强制还原高度 */
    transform: scale(0.37) scaleY(2);
    transform-origin: left top;
    /* background-color: pink; */
  }
}
@media screen and (min-width:362px) and (max-width:415px) {
  .selectContent {
      grid-template-columns: repeat(1, 1fr);
    }
  
    .echarts {
      height: 500rpx;
      width: 1800rpx;
      /* 用 scale 整体缩放后，强制还原高度 */
      transform: scale(0.40) scaleY(2);
      transform-origin: left top;
      /* background-color: pink; */
    }
}

/* @media screen and  (max-width:415px)  {

} */


@media screen and (min-width: 416px) and (max-width:821px) {
  .selectContent {
      grid-template-columns: repeat(1, 1fr);
    }
  .echarts {
      height: 500rpx;
      width: 1800rpx;
      /* 用 scale 整体缩放后，强制还原高度 */
      transform: scale(0.40) scaleY(2);
      transform-origin: left top;
      /* background-color: pink;  */
    }
}


@media screen and (min-width:822px) and (max-width:1023px) {
  .echarts {
      height: 500rpx;
      width: 1800rpx;
      /* 用 scale 整体缩放后，强制还原高度 */
      transform: scale(0.40) scaleY(2);
      transform-origin: left top;
      /* background-color: pink; */
    }
}

@media screen and (min-width: 1024px) {
  .echarts {
      /* height: 800rpx; */
      width: 1800rpx;
      /* background-color: pink; */
    }
}
</style>